<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=	, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>卖座电影</title>
	<link rel="stylesheet" type="text/css" href="./font/iconfont.css">
	<link rel="stylesheet" href="lib/swiper-3.4.2.min.css">
	<link rel="stylesheet" type="text/css" href="./css/main.css">
	<script src="lib/jquery.js"></script>
	<script src='lib/swiper-3.4.2.jquery.min.js'></script>
	<script src='lib/vue.js'></script>
	<script src='lib/vue-resource.js'></script>
	<script src='lib/vue-router.js'></script>
	<script src='js/main.js'></script>
</head>
<body>
	<div id="box" >
		<v-header v-bind:show="show" v-on:change="changeshow"></v-header>
		<router-view></router-view>
		<div class="toTop">
			<i class="iconfont icon-top"></i>
		</div>

		<v-aside v-bind:show="show" v-on:change="changeshow"></v-aside>
	</div>
	
	<template id='header'>
			<header>
				<div class="toolbar">
					<div class="toolbar-list">
						<i class="iconfont icon-list" @click="change();"></i>
					</div>
					<div class="title">卖座电影</div>
				</div>
				<div class="nav-right">
					<a href="" class="city">
						<span>深圳</span>
						<i class="iconfont icon-jiantou"></i>
					</a>
					<a href="" class='mine'>
						<i class="iconfont icon-my"></i>
					</a>
				</div>
			</header>
	</template>

	<template id="aside">
		<transition name="side" >
		<div class="sidebar-container" v-if="show">						
			<div class="slidebar-overlay" >
				<nav>
					<ul>
						<li @click="change();">
							<router-link to='/'>
								<span>首页</span>
								<i>></i>
							</router-link>
						</li>
						<li @click="change();">
							<router-link to='/filmlist/nowlist'>
								<span>影片</span>
								<i>></i>
							</router-link>
						</li>
						<li @click="change();">
							<router-link to="/baoanqu">
								<span>影院</span>
								<i>></i>
							</router-link>
						</li>
						<li @click="change();">
							<a href="">
								<span>商城</span>
								<i>></i>
							</a>
						</li>
						<li @click="change();">
							<a href="">
								<span>演出</span>
								<i>></i>
							</a>
						</li>
						<li @click="change();">						
							<a href="">
								<span>我的</span>
								<i>></i>
							</a>
						</li>
						<li @click="change();">
							<a href="">
								<span>卖座卡</span>
								<i>></i>
							</a>
						</li>
					</ul>
				</nav>
			</div>	
					
		</div>	
		</transition>
	</template>

	<template id='home'>
		<div class="content">	
			<div class="banner">
				<div class="wrap-banner">	
					<div class="swiper-container">
					    <div class="swiper-wrapper">
					        <div class="swiper-slide" v-for='item in lunboList'>
								<a href="">
									<div class="banner-img">
										<img :src="item.imageUrl" alt="">
									</div>							
								</a>
					        </div>			        
					    </div>
					</div>
				</div>
			</div>

			<div class="hot-movie">	
			<ul>
				<li v-for='item in nowList'>
					<router-link :to="{name:'detail',params:{'id':item.id}}">
						<div class="movie-img">
							<img :src="item.cover.origin" alt="">
						</div>
						<div class="movie-info">
							<div class="imformation">
								<p>{{item.name}}</p>
								<p><span>{{item.cinemaCount}}</span>家影院上映<span>{{item.watchCount}}</span>人购票</p>
							</div>
							<div class="rating"> {{item.grade}}</div>
						</div>
					</a>
				</li>
				
			</ul>
			<div class="more-button">
				<button>更多热映电影</button>
			</div>
			</div>
			<div class="will-show hot-movie">
			<div class="title">
				<div class="upcoming"> 即将上映</div>
			</div>
			<ul>
				<li v-for='item in soonList'>
					<router-link :to="{name:'detail',params:{'id':item.id}}">
						<div class="movie-img">
							<img :src="item.cover.origin" alt="">
						</div>
						<div class="movie-info">
							<div class="imformation">
								<p>{{item.name}}</p>
							</div>
							<div class="time"><span>{{new Date(item.premiereAt).getMonth()+1}}</span>月<span>{{new Date(item.premiereAt).getDate()}}</span>日上映</div>
						</div>
					</router-link>
				</li>			
			</ul>
			<div class="more-button">
				<button>更多即将上映电影</button>
			</div>
			</div>
		</div>
	</template>

	<template id='filmlist'>
		<div class='wrap-filmlist'>
			<div class="tap">
				<div class="now">
					<router-link to='nowlist'>
						<div class="active">正在热映</div>
					</router-link>
				</div>
				<div class="soon">
					<router-link to='soonlist'>
						<div>即将上映</div>
					</router-link>
				</div>
			</div>
			<router-view></router-view>
		</div>
	</template>
	
	<template id='nowlist'>
		<div class="wrap-list">
				<ul>
					<li v-for="item in filmlist">
						<a href="">
							<div class="film-item">
								<div class="item-img">
									<img :src="item.poster.origin" alt="">
								</div>
								<div class="item-desc">
									<div class="title">
										<div class="film-name">{{item.name}}</div>	
										<div class="film-grade">{{item.grade}}</div>
										<div class="film-next-arrow">></div>					
									</div>
									<div class="miaoshu">
										<span>{{item.intro}}</span>
									</div>
									<div class="film-counts">
										<span class="film-color">{{item.cinemaCount}}</span>
										<span>家影院上映</span>
										<span class="film-color">{{item.watchCount}}</span>
										<span>人购票</span>
									</div>
								</div>
							</div>
						</a>
					</li>
				</ul>
		</div>
	</template>

	<template id='soonlist'>
		<div class="wrap-list">
				<ul>
					<li v-for="item in soonlist">
						<a href="">
							<div class="film-item">
								<div class="item-img">
									<img :src="item.poster.origin" alt="">
								</div>
								<div class="item-desc">
									<div class="title">
										<div class="film-name">{{item.name}}</div>	
										<div class="film-next-arrow">></div>					
									</div>
									<div class="miaoshu">
										<span>{{item.intro}}</span>
									</div>
									<div class="film-counts">
										<span>{{item.premiereAt | formatDate}}</span>
										<span class="film-color">{{item.watchCount}}</span>
										<span>{{item.premiereAt | formatWeek}}</span>
									</div>
								</div>
							</div>
						</a>
					</li>
				</ul>
		</div>
	</template>

	<template id='detail'>
		<div class='wrap-detail'>
			<div class='banner'>
				<img :src="film.cover.origin" alt="">
			</div>
			<div class="film-intro">
				<div class="title">影片简介</div>
				<div class="daoyan">
					<span>导&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span><span>{{film.director}} |</span>
				</div>
				<div class="zhuyan">
					<span>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span><span v-for='item in film.actors'>{{item.name}} |</span>
				</div>
				<div class="language">
					<span>地区语言：</span><span>{{film.nation}} {{film.language}}</span>
				</div>
				<div class="type">
					<span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</span><span>{{film.category}}</span>
				</div>
				<div class="playtime">
					<span>上映日期：</span><span>{{film.premiereAt | formatDate}}</span>
				</div>
				<div class="content">
					{{film.synopsis}}
				</div>
			</div>
		</div>	
	</template>

	<template id='allcinema'>
		<div class="wrap-cinema">
			<div class="cinemalist">
				<div class="wrap-qu" v-for='(item,index) in cinemalist'>
					<div class="title" @click='item.willshow=!item.willshow'>
						<span>{{index}}</span>
					</div>
					<div class="content" v-for='value in item.list' v-if="item.willshow">
						<div class="wrap-content">
							<div class="cinema-title">{{value.name}}</div>
							<div class="address">{{value.address}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</template>
</body>
</html>